<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <h1 style="float: left;line-height: 60px;padding: 0 20px;">山东财经大学区块链打卡辅助平台</h1>
  </el-menu>
  <span style="font-size: 1rem;position: fixed;top: 62px;left: 2rem">当前系统使用人数：<font color="#f40">{{ count }}</font></span>
  <el-container>
    <el-main style="">
      <el-row style="width: 100%;margin-top: 10%;">
        <el-col :xs="{span:22,offset:1}" :sm="{span:16,offset:4}" :md="{span:10,offset:5}" :lg="{span:10,offset:7}">
          <el-card style="" shadow="never" :style="{width:'100%'}">
            <h2 style="margin: 0 0 20px 0;font-size: 1.4rem;">登入系统</h2>
            <el-form label-width="4rem">
              <el-form-item label="学号">
                <el-input v-model="form.number"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-row :gutter="20">
                  <el-col :xs="{span:24}" :sm="{span:16}">
                    <el-input v-model="form.code"></el-input>
                  </el-col>
                  <el-col :xs="{span:24}" :sm="{span:8}">
                    <el-image
                        :style="{marginTop:clientWidth<768?'20px':''}"
                        style="height: 40px" :src="yzm_src" @click="get_captcha"></el-image>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="text-align: left;padding-left: 20px;margin: 20px 0">
                <el-checkbox v-model="checked" style="margin: 5px;"></el-checkbox>
                <span
                    style="color: #2c3e50;padding-left: 10px;font-size: 10px;">我已知晓本平台仅作为学习交流工具并保证不会恶意传播，一切后果与平台无关。</span>
              </div>
              <el-button type="primary" plain @click="login" style="width: 50%" :disabled="!checked">登录</el-button>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      checked: false,
      form: {},
      yzm_src: '/captcha?g=api&m=checkcode&a=index',
      clientWidth: document.body.clientWidth,
      count: parseInt(Math.random() * 1000)
    };
  },
  methods: {
    login() {
      let url = '/login/Student/handle_login'
      this.$axios.post(url, this.$qs.stringify({
        number: this.form.number,
        card: this.form.password,
        verify: this.form.code,
      })).then((res) => {
        this.$axios.get('/api/index').then((res) => {
          let form = res.data.data
          form['school_id'] = this.form.number
          form['password'] = this.form.password
          localStorage.user_data = JSON.stringify(form)
          if (res.data.exist) {
            this.$router.push('/admin')
          } else {
            this.$router.push('/info')
          }
        })
      })
      this.get_captcha()
    },
    get_captcha() {
      this.yzm_src = '/captcha?g=api&m=checkcode&a=index&t=' + Math.random()
    }
  },
  mounted() {
    this.$axios.get('/api/user/count').then((res) => {
      this.count = res.data
    })
    window.onresize = () => {
      this.clientWidth = document.body.clientWidth
    }
  }
}
</script>

<style scoped>

</style>